<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/ui-base.css">
    <link rel="stylesheet" href="../css/detail.css">
    <script src="../js/cookie.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/interface.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        .w {
            width: 1226px;
            margin: 0 auto;
        }

        .tips {
            width: 1226px;
            margin: 0 auto;
        }

        .cl::after {
            content: "";
            display: block;
            clear: both;
            overflow: hidden;
            visibility: hidden;
        }

        .tips a {
            font-size: 14px;
        }


        .wrapAll {
            margin-top: 100px;
            /* background-color: grey; */
        }

        .wrapInner {
            width: 400px;
            height: 400px;
            border: 1px solid #333;
            position: relative;
        }

        .wrapInner img {
            width: 100%;
            height: 100%;
        }

        .shadow {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            display: none;
        }

        .left {
            width: 400px;
            background-color: pink;
            float: left;
            margin-right: 50px;
        }

        .right {
            background-color: pink;
            overflow: hidden;
            min-height: 400px;
            padding: 0 10px;
        }

        .scaleBar {
            width: 400px;
            height: 400px;
            background-color: rgba(122, 255, 255, 0.6);
            position: relative;
            /* overflow: hidden; */
            display: none;
        }

        .scaleBar img {
            position: absolute;
            /* z-index: -1; */
            width: 800px;
            height: 800px;
        }

        .goodsInfo {
            font-size: 12px;
        }

        .goodsInfo .sku-name {
            font-weight: bolder;
            font-size: 16px;
        }

        .goodsInfo>* {
            margin-top: 5px;
        }

        .switchList {
            display: flex;
            margin-top: 10px;
            padding: 5px auto;
        }

        .switchList li {
            flex: 1;
        }

        .switchList li+li {
            margin-left: 10px;
        }

        .switchList li img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="tips">
        <a href="./login.html">请登录</a>
        <a href="./register.html">免费注册</a>
    </div>
    <div class="wrapAll w cl">
        <div class="left">
            <div class="wrapInner">
                <!-- <div class="shadow"></div>
                <img class="smallImg"
                    src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg";
                    alt=""> -->
            </div>
            <ul class="switchList">
                <!-- <li><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg   "
                        alt=""></li>
                <li><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg   "
                        alt=""></li>
                <li><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg   "
                        alt=""></li>
                <li><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg   "
                        alt=""></li> -->
               
            </ul>
        </div>
        <div class="right">
            <div class="scaleBar">
                <!-- <img class="bigImg"
                    src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg"
                    alt=""> -->
            </div>
            <div class="goodsInfo">
                <!-- <div class="sku-name">
                    华为 HUAWEI Mate 40 Pro麒麟9000 5G SoC芯片 超感知徕卡电影影像 66W有线超级快充8GB+256GB秋日胡杨5G全网通套餐二（含充电器和数据线）
                </div>
                <div class="summary">
                    京 东 价: <span>￥ 6999.00</span> 降价通知
                </div>
                <div class="wrap-input">
                    <a href="javascript:;" class="reduce">-</a>
                    <input type="number" class="count-input" value="1">
                    <a href="javascript:;" class="add">+</a>
                </div>
                <div class="buyGoods">
                    <button class="addToShoppingCar">加入购物车</button>
                </div> -->
            </div>
        </div>
    </div>
    <div class="goodsDetail w">

    </div>
</body>
<script>
    $(async function(){
         // lgc 标识用户身份
        var tips = document.getElementsByClassName("tips")[0];
        var user = getCookie("lgc");
        if (user) {
            tips.innerHTML = `欢迎您,${user} <button onclick="exit()">退出</button>`
        }

        var url = urlParse();
        var gid = url.gid;
        if(!gid){
            location.href = "./index.html";
        }

        var result = await searchGoodsByGoodsId({gid});
        console.log(result);
        var {status,data:{goodsId,goodsName,goodsPrice,goodsImg,smallPicList,bigPicList,goodsDetail}} = result;
        console.log(bigPicList);
        if(!status){
            location.href = "./index1.html";
        }


        $(".wrapInner").html(`<div class="shadow"></div>
            <img class="smallImg"
                src="${bigPicList[0]}";
                alt="">`);
                
        var html = "";
        var len = smallPicList.length >= 5 ? 5 : smallPicList.length;
        for(var i=0;i< len;i++){
            html+=`<li><img src="${smallPicList[i]}"
                    alt=""></li>`
        }
        $(".switchList").html(html);


        $(".scaleBar").html(` <img class="bigImg"
                    src="${bigPicList[0]}"
                    alt="">`)

        var html = `<div class="sku-name">
                    ${goodsName}
                </div>
                <div class="summary">
                    京 东 价: <span>￥ ${goodsPrice}</span> 降价通知
                </div>
                <div class="wrap-input">
                    <a href="javascript:;" class="reduce">-</a>
                    <input type="number" class="count-input" value="1">
                    <a href="javascript:;" class="add">+</a>
                </div>
                <div class="buyGoods">
                    <button class="addToShoppingCar">加入购物车</button>
                </div>`

        $(".goodsInfo").html(html);

        $(".goodsDetail").html(goodsDetail);


        // 加入购物车  => 需要知道哪些信息?
        // 谁  买了什么东西  买了几件?
        // 谁             当前登录的用户?
        // 买了什么东西?   商品编号
        // 买了几件? 

        $(document).on("click",".addToShoppingCar", async function(){

            var user = getCookie("lgc");
            var buyNum = $(".count-input").val();
            console.log(user);
            if(user){ //有用户  => 用户登录   => 加入购物车
                var result = await addToShopingCar({user,gid,buyNum});
                console.log(result);
                var {status,msg} = result;
                if(status){
                    if(confirm("购买成功,是否进入购物车?")){
                        location.href = "shoppingCar.html";
                    }
                }else{
                    alert(msg);
                }

            }else{

                // 问题?
                // 用户没有登录  =>    去登录 => 登录成功(跳转主页)  

                // 期望=> 登录时,从哪里来,回哪里去?

                // 怎么解决? 跳转登录的同时,将当前网页url也作为数据传入(先编码,在传入)

                location.href = "./login.html?returnUrl=" + encodeURIComponent(location.href);
            }


        })


    })








































    function urlParse(){
        var search = location.search;
        var data = {};
        if(search){
            // console.log(search);
            var str = search.substr(1);
            var list = str.split("&");
            // console.log(list);
            for(var i=0;i<list.length;i++){
                var item = list[i];
                var key = item.split("=")[0];
                var val = item.split("=")[1];
                data[key] = val;
            }
            // console.log(data);
        }
        return data;
    }

    function exit() {
        delCookie("lgc");
        location.reload();
    }




</script>

</html>